<template>
    <ul class="list">
        <li class="item"
        v-for=" item of letters" 
        :key="item"
        @touchstart.prevent="touchstart"
        @touchmove="touchmove"
        @touchend="touchend"
        @click="handleClick"
        :ref="item"

        >
        {{item}}
        </li>

    </ul>
</template>

<script>
    export default {
        name:"CityAlphabet",
        props:{
            cities:Object
        },
        data(){
            return{
          touchStatus:false,
          startY:0,
          timer:null
            }
        },
        computed:{
            letters(){
        const letters=[]
        for(let i in this.cities){
            letters.push(i)
        }      
        return letters
            }
        },
        updated(){
            this.startY=this.$refs['A'][0].offsetTop
        },
        methods:{
         touchstart(){
             this. touchStatus=true
         },
         touchmove(e){
             if(this.touchStatus){
         if(this.timer){
             clearTimeout(this.timer)
         }
         this.timer=setTimeout(()=>{
         const touchY=e.touches[0].clientY-79
         const index=Math.floor((touchY-this.startY)/22)
         if(index>=0 && index<this.letters.length){
            this.$emit('change',this.letters[index])
         }
         
         },16)
       
         
         
        
      
        
             }
         }, 
         touchend(){
              this. touchStatus=false
         },  
         handleClick(e){
             this.$emit('change',e.target.innerText)
           
         }   
        }
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.list
  position absolute
  display flex
  flex-direction column
  justify-content center 
  top 1.58rem
  right .1rem
  bottom 0
  width .4rem
 .item
   line-height .44rem
   text-align center 
   color $bgcolor
</style>